<template>
  <div class="m-detialSearchTablePadding">
    <div class="m-searchListPanel">
      <div class="layout-1"><span class="leftLine"></span>信息列表</div>
      <div class="layout-2">
        <el-button type="text" icon="el-icon-plus" @click="addRowData.show = true">新建</el-button>
      </div>
    </div>
    <div class="layout-2">
      <div class="m-dataList">
        <el-table
          :data="dataList"
          style="width: 100%"
          v-loading="dataListLoading"
          element-loading-text="loading..."
          max-height="800"
        >
          <el-table-column
            prop="noteId"
            label="备注编号">
          </el-table-column>
          <el-table-column
            prop="title"
            label="主题">
          </el-table-column>
          <el-table-column
            prop="desc"
            label="主题描述">
          </el-table-column>
          <el-table-column
            prop="createUser"
            label="创建人"
            width="120">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="160">
          </el-table-column>
        </el-table>
      </div>
      <div class="m-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes=pagination.pageSizeList
          :current-page=pagination.pageNo
          :page-size=pagination.pageSize
          layout="total, sizes, prev, pager, next"
          :total=pagination.total>
        </el-pagination>
      </div>
    </div>
    <el-dialog title="创建备注" :visible.sync="addRowData.show" width="400px"
               :close-on-click-modal="false" :close-on-press-escape="false" @close="clearAddDialog">
      <el-form :model="addRowData.form" ref="refddRowDataForm" :rules="addRowData.rules" label-position="left" label-width="80px">
        <el-form-item label="主题" prop="title">
          <el-input v-model="addRowData.form.title" clearable></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" v-model="addRowData.form.desc" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addRowData.show = false">取消</el-button>
        <el-button type="primary" @click="addRowDataSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import * as NoteAPI from '@/Api/note'
  import * as Utils from '@/utils'
  export default {
    name: 'TheRemark',
    data () {
      return {
        pagination: Utils.commonPagination(),
        addRowData: {
          show: false,
          form: {
            title:'',
            desc:'',
          },
          rules: {
            title:[
                { required: true, message: '备注标题不能为空', trigger: 'blur' },
                { max: 30, message: '备注标题不能多于30个字符', trigger: 'blur' },
                ],
          }
        },
        dataList:[],
        dataListLoading:false,
        addLoading:false,
      }
    },
    props: {
      type: {
        default: '2',
      }
    },
    methods: {
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        if(this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      handleCurrentChange(index) {
        this.pagination.pageNo = index;
        this.queryList();

      },
      addRowDataSubmit(){
          this.$refs.refddRowDataForm.validate(flg =>{
              if(!flg) {
                  return;
              }
              this.addLoading = true;
            NoteAPI.noteCreate(Object.assign({
              type: this.type,
              typeId: this.$route.params.id.split("_")[0],
            },this.addRowData.form))
              .then(res => {
                this.addLoading = false;
                if (res.code != 0) {
                  this.$notify.warning({
                    title: '温馨提示',
                    message: res.msg
                  })
                  return;
                }
                this.addRowData.show = false;
                this.queryList();
                this.$message({
                  type: 'success',
                  message: '新建成功!'
                });
              })
              .catch(error => {
                this.addLoading = false;
                console.log(error)
              })
          })
      },
      clearAddDialog(){
        this.$refs.refddRowDataForm.resetFields();
      },
      queryList(){
          this.dataListLoading = true;
        NoteAPI.noteQuery({
          type: this.type,
          typeId: this.$route.params.id.split('_')[0],
          pageNo: this.pagination.pageNo,
          pageSize: this.pagination.pageSize,
        })
          .then(res => {
            this.dataListLoading = false;
            if (res.code != 0) {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            this.dataList = res.data.content;
            this.pagination.total = res.data.totalElements
          })
          .catch(error => {
            this.dataListLoading = false;
            console.log(error)
          })
      },
    },
    created(){
      this.queryList();
    }
  }
</script>

<style scoped lang="scss">
  .m-remark {
    background-color: #fff;
  }
</style>
